<template>
	<view class="container">
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" style="margin-bottom: 30rpx;"
				@tap="goDetail(item.id)">
				<list-cell :hover="false" lineLeft lineRight>
					<view class="w-100 d-flex align-items-center ">
						<view class="d-flex flex-column">
							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;font-weight: 700;">
								{{ item.store.name }}
							</view>
							<view class="font-size-sm text-color-assist">
								下单时间：{{ $util.formatDateTime(item.created_at)  }}</view>
						</view>
						<view class=" d-flex flex-column right-text-box">
							<view class="font-size-lg text-color-primary"
								style="margin-bottom: 20rpx;text-align: right;">
								{{ item.status_text }}
							</view>
							<view class="d-flex align-items-center justify-content-end font-size-sm text-color-assist"
								@tap.stop="copyText(item.order_no)">
								订单：112****4544
								<image src="/static/images/order/copy-icon.png" mode=""
									style="width: 36rpx;height: 36rpx; margin-left: 6rpx;"></image>
							</view>
						</view>


					</view>
				</list-cell>
				<list-cell :hover="false" last>
					<view class="w-100 d-flex flex-column">
						<!-- <view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
							{{ orderGoodsName(item.goods) }}
						</view> -->
						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
							<view class="font-size-sm text-color-assist">
								<!-- {{ orderGoodsName(item.goods) }} -->
								<image v-for="(img,imgIndex) in 3" :key="imgIndex" class="order-image"
									src="https://wx4.sinaimg.cn/mw690/64be6620ly1hsgup6bwnwj20m80m8t9w.jpg" mode="">
								</image>
								<!-- src="../../static/images/mine/default.png" -->
							</view>
							<view class="d-flex flex-column font-size-sm text-color-base align-items-end">
								<view>共{{ item.goods_num }}件</view>
								<view class="font-size-sm">实付￥{{ item.amount }}</view>
							</view>
						</view>
						<!-- <view class="d-flex align-items-center justify-content-end">
							<view>
								<button type="primary" plain size="mini" @tap.stop="confirmReceipt(item)">确认收货</button>
							</view>
						</view> -->
					</view>
				</list-cell>
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'

	export default {
		components: {
			listCell
		},
		data() {
			return {

			}
		},
		props: ['orderList', 'ordersState'],
		watch: {
			orderList(newVal, oldVal) {
				console.log('oldList', this);
				console.log('newList', newVal);
			},
			ordersState(newVal, oldVal) {
				console.log('oldState', this);
				console.log('newState', newVal);
			},
		},
		computed: {
			orderGoodsName() {
				return (goods) => {
					let arr = []
					goods.forEach(good => arr.push(good.name + '*' + good.number))
					return arr.join('，')
				}
			}
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: '112121****4544',
					success: function() {
						console.log('success', text);
					}
				});
			},
			goDetail(id) {
				console.log('调整', id)
				uni.navigateTo({
					url: '/pages/orders/orders-detail?id=' + id
				})
			},
			confirmReceipt() {
				console.log('确认收货')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.right-text-box {
		flex: 1;
		text-align: right;
	}

	.order-image {
		width: 96rpx;
		height: 96rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
	}
</style>